<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./字体图标/iconfont.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
</head>
<body>
    <!-- 轮播部分 -->
    <div class="header">
        <!-- 导航条 -->
        <div class="navigation">
            <h1>电影网</h1>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="movies.html">电影</a></li>
                <li><a href="show.html">电视剧</a></li>
            </ul>
            <div class="icon">
                <i class="iconfont icon-sousuo"></i>
                <i class="iconfont icon-xiaoxi"></i >
                <div>
                    <a href="zhuce.html" style="color:#fff;;">
                        <p>账户</p>
                        <i class="iconfont icon-geren uname"></i>
                    </a>
                </div>
            </div>
        </div>
        <!-- 图片部分 -->
        <div class="banner">
            <div class="swiper-container" id="banner1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide box">
                        <img src="./img/slide01.jpg" alt="">
                        <div class="box-one">
                            <div>
                                <h1>The Rise of Football</h1>
                                <div class="pinfen">
                                    <p style="color: #65EE5B;">imdb评分：5.4</p>
                                    <p style="color: #fff;font-weight: bold;">2020</p>
                                    <p>4k<span>超高清</span></p>
                                </div>
                                <p>《足球》紧随迪·艾伦和巴里·格力克曼之后，他们是纽约市的舞台明星。</p>
                                <div class="yugao">
                                    观看预告片
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide box">
                    <img src="./img/slide02.jpg" alt="">
                    <div class="box-one">
                        <div>
                            <h1>The History of Ottomans</h1>
                            <div class="pinfen">
                                <p style="color: #65EE5B;">imdb评分：6.0</p>
                                <p style="color: #fff;font-weight: bold;">2020</p>
                                <p>1080<span>高清</span></p>
                            </div>
                            <p>1914年，奥斯曼帝国在与巴尔干民族主义者和意大利军队进行多年战争后，人和资源枯竭。新的战争一触即发 。</p>
                            <div class="yugao">
                                观看预告片
                            </div>
                        </div>
                    </div>
                    </div>
                    <div class="swiper-slide box">
                        <img src="./img/slide03.jpg" alt="">
                        <div class="box-one">
                            <div>
                                <h1>La Guerra de Mandou</h1>
                                <div class="pinfen">
                                    <p style="color: #65EE5B;">imdb评分：6.4</p>
                                    <p style="color: #fff;font-weight: bold;">2020</p>
                                    <p>720p<span>高清</span></p>
                                </div>
                                <p>她能真正庆祝她是谁，由瑞安·墨菲指导的《曼杜》是一部壮观、具有深意的电影</p>
                                <div class="yugao">
                                    观看预告片
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 按钮和切换 -->
                <div class="swiper-pagination swiper-pagination-white" ></div>
            </div>
        </div>
    </div>

    <!-- 内容部分 -->
    <div class="content">
        <!-- 推荐 -->
        <div class="recommend">
            <div class="rec-tui">
                <div class="rec-ti">
                    <p>ONLINE STREAMING</p>
                    <h1>在线观看影视</h1>
                </div>
                <div class="rec-tu">
                    <div class="tu-in">
                        <div class="tu-in-da">
                            <img src="./img/tuijian01.jpg" alt="">
                            <div class="mask">
                                <p>灾难</p>
                            </div>
                            <div class="tu-word">
                                <h2>末日之战</h2>
                                <div>
                                    <i class="iconfont icon-icon_play"></i>
                                </div>
                                <p>播出时间：2020-01</p>
                            </div>
                        </div>
                    </div>
                    <div class="tu-in">
                        <div class="tu-in-da">
                            <img src="./img/tuijian02.jpg" alt="">
                            <div class="mask">
                                <p>战争</p>
                            </div>
                            <div class="tu-word">
                                <h2>内战</h2>
                                <div>
                                    <i class="iconfont icon-icon_play"></i>
                                </div>
                                <p>播出时间：2020-01</p>
                            </div>
                        </div>
                    </div>
                    <div class="tu-in">
                        <div class="tu-in-da">
                            <img src="./img/tuijian03.jpg" alt="">
                            <div class="mask">
                                <p>竞技</p>
                            </div>
                            <div class="tu-word">
                                <h2>最佳游戏</h2>
                                <div>
                                    <i class="iconfont icon-icon_play"></i>
                                </div>
                                <p>播出时间：2020-02</p>
                            </div>
                        </div>
                    </div>
                    <div class="tu-in">
                        <div class="tu-in-da">
                            <img src="./img/tuijian04.jpg" alt="">
                            <div class="mask">
                                <p>科技</p>
                            </div>
                            <div class="tu-word">
                                <h2>头号玩家</h2>
                                <div>
                                    <i class="iconfont icon-icon_play"></i>
                                </div>
                                <p>播出时间：2020-03</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 电视剧 -->
        <div class="TV">
            <div class="TV-play">
                <div class="play-ti">
                    <p>FIND ANYWHERE ELSE</p>
                    <h1>精彩电视剧</h1>
                </div>
                <ul class="play-tou">
                    <li>热门剧</li>
                    <li>内陆剧</li>
                    <li>海外剧</li>
                    <li>网络剧</li>
                    <li>抗战剧</li>
                </ul>
                <div class="play-tu">
                    <div class="playnav">
                        <div class="playnav-mu">
                            <div class="mu-tu">
                                <img src="./img/movies01.jpg" alt="">
                                <div class="mu-mask">
                                    <div class="mask-wen">
                                        <p>1080<span>高清</span></p>
                                        <p>5.7<span>评分</span></p>
                                    </div>
                                </div>
                                <div class="mu-time">
                                    <p>全50集 , <span>恋爱</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>那一刻相见</h3>
                            </div>
                            <div class="mu-tu">
                                <img src="./img/movies02.jpg" alt="">
                                <div class="mu-mask">
                                    <div class="mask-wen">
                                        <p>1080<span>高清</span></p>
                                        <p>7.6<span>评分</span></p>
                                    </div>
                                </div>
                                <div class="mu-time">
                                    <p>全50集 , <span>冒险</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>大江大河2</h3>
                            </div>
                            <div class="mu-tu">
                                <img src="./img/movies03 .jpg" alt="">
                                <div class="mu-mask">
                                    <div class="mask-wen">
                                        <p>1080<span>高清</span></p>
                                        <p>6.1<span>评分</span></p>
                                    </div>
                                </div>
                                <div class="mu-time">
                                    <p>全50集 , <span>恋爱</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>小风暴</h3>
                            </div>
                            <div class="mu-tu">
                                <img src="./img/movies04.jpg" alt="">
                                <div class="mu-mask">
                                    <div class="mask-wen">
                                        <p>1080<span>高清</span></p>
                                        <p>5.1<span>评分</span></p>
                                    </div>
                                </div>
                                <div class="mu-time">
                                    <p>全50集 , <span>恋爱</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>这就是生活</h3>
                            </div>
                        </div>
                    </div>
                    <div class="playnav">
                        <div class="playnav-mu">
                            <div class="mu-tu">
                                <img src="./img/movies0201.jpg" alt="">
                                <div class="mu-mask">
                                    <div class="mask-wen">
                                        <p>1080<span>高清</span></p>
                                        <p>5.7<span>评分</span></p>
                                    </div>
                                </div>
                                <div class="mu-time">
                                    <p>全42集 , <span>恋爱</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>有翆</h3>
                            </div>
                            <div class="mu-tu">
                                <img src="./img/movies0202.jpg" alt="">
                                <div class="mu-mask">
                                    <div class="mask-wen">
                                        <p>1080<span>高清</span></p>
                                        <p>7.6<span>评分</span></p>
                                    </div>
                                </div>
                                <div class="mu-time">
                                    <p>全42集 , <span>恋爱</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>百岁之好</h3>
                            </div>
                            <div class="mu-tu">
                                <img src="./img/movies0203.jpg" alt="">
                                <div class="mu-mask">
                                    <div class="mask-wen">
                                        <p>1080<span>高清</span></p>
                                        <p>6.1<span>评分</span></p>
                                    </div>
                                </div>
                                <div class="mu-time">
                                    <p>全42集 , <span>恋爱</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>大秦赋</h3>
                            </div>
                            <div class="mu-tu">
                                <img src="./img/movies0204.jpg" alt="">
                                <div class="mu-mask">
                                    <div class="mask-wen">
                                        <p>1080<span>高清</span></p>
                                        <p>5.1<span>评分</span></p>
                                    </div>
                                </div>
                                <div class="mu-time">
                                    <p>全42集 , <span>恋爱</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>少爷罗曼史</h3>
                            </div>
                        </div>
                    </div>
                    <div class="playnav">
                        <div class="playnav-mu">
                            <div class="mu-tu">
                                <img src="./img/movies03(01).jpg" alt="">
                                <div class="mu-mask">
                                    <div class="mask-wen">
                                        <p>1080<span>高清</span></p>
                                        <p>5.7<span>评分</span></p>
                                    </div>
                                </div>
                                <div class="mu-time">
                                    <p>全60集 , <span>喜剧</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>灯的沉默</h3>
                            </div>
                            <div class="mu-tu">
                                <img src="./img/movies03(02).jpg" alt="">
                                <div class="mu-mask">
                                    <div class="mask-wen">
                                        <p>1080<span>高清</span></p>
                                        <p>7.6<span>评分</span></p>
                                    </div>
                                </div>
                                <div class="mu-time">
                                    <p>全60集 , <span>女性</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>婢女</h3>
                            </div>
                            <div class="mu-tu">
                                <img src="./img/movies03(03).jpg" alt="">
                                <div class="mu-mask">
                                    <div class="mask-wen">
                                        <p>1080<span>高清</span></p>
                                        <p>6.1<span>评分</span></p>
                                    </div>
                                </div>
                                <div class="mu-time">
                                    <p>全60集 , <span>喜剧</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>麦克斯的工作人员</h3>
                            </div>
                            <div class="mu-tu">
                                <img src="./img/movies03(04).jpg" alt="">
                                <div class="mu-mask">
                                    <div class="mask-wen">
                                        <p>1080<span>高清</span></p>
                                        <p>5.1<span>评分</span></p>
                                    </div>
                                </div>
                                <div class="mu-time">
                                    <p>全60集 , <span>成长</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>少爷罗曼史</h3>
                            </div>
                        </div>
                    </div>
                    <div class="playnav">
                        <div class="playnav-mu">
                            <div class="mu-tu">
                                <img src="./img/movies04(01).jpg" alt="">
                                <div class="mu-mask">
                                    <div class="mask-wen">
                                        <p>1080<span>高清</span></p>
                                        <p>5.7<span>评分</span></p>
                                    </div>
                                </div>
                                <div class="mu-time">
                                    <p>全50集 , <span>恋爱</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>浪花男生</h3>
                            </div>
                            <div class="mu-tu">
                                <img src="./img/movies04(02).jpg" alt="">
                                <div class="mu-mask">
                                    <div class="mask-wen">
                                        <p>1080<span>高清</span></p>
                                        <p>7.6<span>评分</span></p>
                                    </div>
                                </div>
                                <div class="mu-time">
                                    <p>全50集 , <span>奇遇</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>兄台请留步</h3>
                            </div>
                            <div class="mu-tu">
                                <img src="./img/movies04(03).jpg" alt="">
                                <div class="mu-mask">
                                    <div class="mask-wen">
                                        <p>1080<span>高清</span></p>
                                        <p>6.1<span>评分</span></p>
                                    </div>
                                </div>
                                <div class="mu-time">
                                    <p>全50集 , <span>校园</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>少年有点酷</h3>
                            </div>
                            <div class="mu-tu">
                                <img src="./img/movies04(04).jpg" alt="">
                                <div class="mu-mask">
                                    <div class="mask-wen">
                                        <p>1080<span>高清</span></p>
                                        <p>5.1<span>评分</span></p>
                                    </div>
                                </div>
                                <div class="mu-time">
                                    <p>全50集 , <span>灵异</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>不可思议电台</h3>
                            </div>
                        </div>
                    </div>
                    <div class="playnav">
                        <div class="playnav-mu">
                            <div class="mu-tu">
                                <img src="./img/movies05(01).jpg" alt="">
                                <div class="mu-mask">
                                    <div class="mask-wen">
                                        <p>1080<span>高清</span></p>
                                        <p>5.7<span>评分</span></p>
                                    </div>
                                </div>
                                <div class="mu-time">
                                    <p>全52集 , <span>抗战</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>绝地反击</h3>
                            </div>
                            <div class="mu-tu">
                                <img src="./img/movies05(02).jpg" alt="">
                                <div class="mu-mask">
                                    <div class="mask-wen">
                                        <p>1080<span>高清</span></p>
                                        <p>7.6<span>评分</span></p>
                                    </div>
                                </div>
                                <div class="mu-time">
                                    <p>全52集 , <span>抗战</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>山河</h3>
                            </div>
                            <div class="mu-tu">
                                <img src="./img/movies05(03).jpg" alt="">
                                <div class="mu-mask">
                                    <div class="mask-wen">
                                        <p>1080<span>高清</span></p>
                                        <p>6.1<span>评分</span></p>
                                    </div>
                                </div>
                                <div class="mu-time">
                                    <p>全52集 , <span>军旅</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>陆战之王</h3>
                            </div>
                            <div class="mu-tu">
                                <img src="./img/movies05(05).jpg" alt="">
                                <div class="mu-mask">
                                    <div class="mask-wen">
                                        <p>1080<span>高清</span></p>
                                        <p>5.1<span>评分</span></p>
                                    </div>
                                </div>
                                <div class="mu-time">
                                    <p>全52集 , <span>热血</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>北国英雄</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="play-geng">
                    <div class="geng-div">
                        <p>查看更多</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 会员 -->
        <div class="section">
            <div class="video" >
                <video src="./img/video01.mp4" autoplay></video>
            </div>
            <div class="vip">
                <div class="vip-wen">
                    <p>START SECURE BROWSING</p>
                    <h1>欢迎加入我们</h1>
                </div>
                <div class="vip-me">
                    <div class="me-yuan">
                        <img src="./img/icon01.png" alt="">
                        <h4>1个月会员</h4>
                        <span>$<h1>9.99</h1></span>
                        <span>/每月</span>
                        <div class="wu">
                            <p>立即购买</p>
                        </div>
                        <span>30天退款保证</span>
                    </div>
                    <div class="me-yuan">
                        <img src="./img/icon01.png" alt="">
                        <h4>12个月会员</h4>
                        <span>$<h1>3.99</h1></span>
                        <span>/每月</span>
                        <div class="jieyue">
                            <h4>节省 68%</h4>
                        </div>
                        <div class="shan">
                            <del>$286.00</del>
                            <span>$89.00 前两年</span>
                        </div>
                        <div class="wu">
                            <p>立即购买</p>
                        </div>
                        <span>30天退款保证</span>
                    </div>
                    <div class="me-yuan">
                        <img src="./img/icon01.png" alt="">
                        <h4>6个月会员</h4>
                        <span>$<h1>6.99</h1></span>
                        <span>/每月</span>
                        <div class="wu">
                            <p>立即购买</p>
                        </div>
                        <span>30天退款保证</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- email -->
        <div class="move-email">
            <div class="move-nav">
                <h1>开始你的前30天</h1>
                <p>准备好观看了吗？输入电子邮件以创建或重新启动会员资格。</p>
                <div class="input-flex">
                    <input type="email" name="email" class="email" placeholder="请输入你的电子邮件">
                    <button class="btn">加入</button>
                </div>
                
            </div>
        </div>
        <!-- 版权 -->
        <div class="copyright">
            <div class="cop-zt">
                <p>
                    <i class="iconfont icon-banquan-xian"></i>
                    2020 jQuery大作业 | 电影网站
                </p>
                <p>版权所有</p>
            </div>
        </div>
    </div>

</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/swiper.min.js"></script>
<script src="./js/index.js"></script>
</html>